<template>
  <div id="HotCollegeList">
    <img
      @click="handleImgClick"
      class="curpoin"
      style="width: 300px"
      :src="hostDataList.imgUrl"
      alt=""
    />
    <div class="hotList">
      <div class="left-bar font-weight800" style="margin: 10px 0">
        {{ hostDataList.title }}
      </div>
      <div
        v-for="(item, index) in hostDataList.hotList"
        :key="item.code"
        class="df"
        style="justify-content: space-between; margin-bottom: 15px"
      >
        <div class="df">
          <div style="margin-right: 20px">
            <div
              v-if="index !== 0 && index !== 1 && index !== 2"
              style="width: 27px; text-align: center"
            >
              {{ index }}
            </div>
            <!-- {{ index }} -->
            <img
              style="width: 27px"
              v-if="index == 0"
              src="@/assets/images/hot1.png"
              alt=""
            />
            <img
              style="width: 27px"
              v-if="index == 1"
              src="@/assets/images/hot2.png"
              alt=""
            />
            <img
              style="width: 27px"
              v-if="index == 2"
              src="@/assets/images/hot3.png"
              alt=""
            />
          </div>
          <div
            class="cnname-box"
            :class="{ active: activeClass == index }"
            :style="type != 5 ? 'cursor:pointer' : ''"
            @click="handleTitle(item)"
            @mouseenter="handleEnter(index)"
            @mouseleave="handleLeave(index)"
          >
            {{
              item.cnName ||
              item.name ||
              item.jobName ||
              item.companyName ||
              item.title
            }}
          </div>
        </div>
        <div class="f14" v-if="item.hits" style="color: #666">
          {{ item.hits }}万 热度
        </div>
        <div class="f14" v-if="item.companyHiringStr" style="color: #666">
          招聘{{ item.companyHiringStr }}万 人
        </div>
        <div class="f14" v-if="item.view_total" style="color: #666">
          {{ item.view_total }}次 浏览
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const props = defineProps({
  hostDataList: {
    type: Object,
    default: () => {},
  },
  url: {
    type: String,
    default: '',
  },
  linkType: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: '',
  },
});
const handleTitle = (item) => {
  if (props.type == '1') {
    if (props.linkType) {
      const url = props.url + '?id=' + item.id;
      window.open(url, '_blank');
    } else {
      router.push({
        path: props.url,
        query: {
          id: item.id,
        },
      });
      // console.log(props.url, "aaa", item);
    }
  } else if (props.type == '2') {
    const url = '/college/detail' + '?collegecode=' + item.code;
    window.open(url, '_blank');
  } else if (props.type == '3') {
    const url =
      '/majorLibrary/majorLibraryDet' +
      '?code=' +
      item.code +
      '&name=' +
      item.name +
      '&level=' +
      'benke';
    localStorage.setItem('level', 'benke');
    window.open(url, '_blank');
  } else if (props.type == '4') {
    const url =
      '/jorLibrary/jorLibraryDet' +
      '?code=' +
      item.jobCode +
      '&name=' +
      item.jobName;
    window.open(url, '_blank');
  }
};
const handleImgClick = () => {
  if (props.type == '2') {
    window.open('/batchInfo', '_blank');
  } else if (props.type == '3') {
    router.push('/appraisal');
  }
};
const activeClass = ref(-1);
const handleEnter = (index) => {
  if (props.type != '5') activeClass.value = index;
};
const handleLeave = () => {
  if (props.type != '5') activeClass.value = -1;
};
</script>

<style lang="scss" scoped>
#HotCollegeList {
  width: 300px;
}
.hotList {
  margin-top: 30px;
  .left-bar {
    border-left: 4px solid var(--color-text);
    padding-left: 10px;
    // cursor: pointer;
  }
  .cnname-box {
    // width: 200px;
    width: 150px;
    white-space: nowrap; /* 文本不换行 */
    overflow: hidden; /* 隐藏溢出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
    color: #333;
    margin-right: 8px;
  }
  .active {
    color: var(--color-text);
  }
}
</style>
